import { onMounted } from 'vue'
import { app } from '@/main';

export const useInitMapHook = () => {
    /* 1、地图初始化 */
    const gaode = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
        })
    });
    var image = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
            wrapX: false
        })
    })

    

    
    onMounted(() => {
        const map = new ol.Map({
            target: "map",
            layers: [
                
                gaode,
                image,
               
            ],
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 6,
                projection: 'EPSG:4326'
            })
        })
        /* 2、地图全局变量的设置 */
        app.config.globalProperties.$map = map;
    })
    return {
        gaode,
        image,
    };


}